<html>

<head>
  <script src="/static/js/jquery-3.2.1.min.js"></script>
  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="/static/css/bootstrap.min.css">

  <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
  <link rel="stylesheet" href="/static/css/bootstrap-theme.min.css">

  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script src="/static/js/bootstrap.min.js"></script>

  <script src="/static/js/auth.js"></script>
  <script src="/static/js/layer/3.1.0/layer.js"></script>
  <script src="/static/js/layui.js"></script>
</head>

<body style="width:100%;height:100%">
  <div style="width:100%;height:100%;margin:0 0 10px 0;text-align: center;">
    <div style="font-size:20px;font-weight:bold;
                margin:0;background: rgb(195, 228, 250);height:32px;">
      文件云盘首页
    </div>
    <table style="height:100%;width:100%;text-align: left;border-width: 2px; border-color: lightslategrey;">
      <tbody>
        <tr style="margin-bottom: 20px;">
          <td style="width:20%;height: 100%;background: lightsteelblue;">
            <div style="text-align: top;height:20%;margin: 10px 0 0 10px;">
              <img style="width:80px;height:80px;" src="/static/img/avatar.jpeg"></img><br>
              用户名: <p id="username" style="color: seagreen"></p>
              注册时间: <p id="regtime" style="color: seagreen"></p>
            </div>
            <div style="height: 80%;"></div>
          </td>
          <td style="width: 3px;height:100%;">
            <div style="width:100%;height: 100%;background:rgb(202, 157, 248);"></div>
          </td>
          <td style="text-align: top;">
            <div>文件列表
              <button class="btn btn-success" onclick="toUploadFile()" style="float: right;margin-right: 30px;">上传文件
              </button>
              <div style="width:100%;height: 1px;background:rgb(202, 157, 248);margin-top: 15px;"></div>
            </div>
            <div style="height:95%;" style="width:100%;">
              <table id="filetbl" style="margin-left:3%;width:96%;">
                <thead style="height:50px;border:1px;">
                  <tr style="height:50px;border:1px;">
                    <th>文件hash</th>
                    <th>文件名</th>
                    <th>文件大小</th>
                    <th>上传时间</th>
                    <th>最近更新</th>
                    <th>操作</th>
                  </tr>
                </thead>
              </table>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

<script lang="javascript">
  window.onload = function () {
    var username = document.getElementById('username');
    $.ajax({
      url: "/user/info?" + queryParams(),
      type: "POST",
      error: function (jqXHR, textStatus, errorThrown) {
        if (textStatus == "error") {
          alert(textStatus + " : " + errorThrown);
        } else {
          alert(textStatus);
        }
      },
      success: function (body, textStatus, jqXHR) {
        var resp = JSON.parse(body)
        document.getElementById("username").innerHTML = resp.data.user_name;
        document.getElementById("regtime").innerHTML = resp.data.signup_at;
        updateFileList();
      }
    });
  }

  function updateFileList() {
    $.ajax({
      url: "/file/query?" + queryParams(),
      type: "POST",
      data: {
        limit: 15
      },
      error: function (jqXHR, textStatus, errorThrown) {
        if (textStatus == "error") {
          alert(textStatus + " : " + jqXHR.responseJSON.msg);
        } else {
          alert(textStatus);
        }
      },
      success: function (body, textStatus, jqXHR) {
        if (!body) {
          return;
        }
        var data = body;
        if (!data || data.length <= 0) {
          return;
        }

        var downloadHtml = '<button class="btn btn-info" ' +
                'style="height:30px;margin:5px 0;"' +
                'onClick = "downloadFile(\'http://127.0.0.1:8080/file/' +
                'downloadurl?filehash={0}&{1}\')">下载</button>';
        var renameFileHtml = '<button class="btn btn-warning" ' +
                'style="height:30px;margin:5px 3px;"' +
                'onClick = "renameFile(\'{0}\',\'{1}\',\'http://127.0.0.1:8080/file/' +
                'update?op=0&filehash={2}&{3}\')">重命名</button>';
        var cdlFileHtml = '<button class="btn btn-info" ' +
                'style="height:30px;margin:5px 0;"' +
                'onClick = "cdlFile(\'?filehash={0}&{1}\')">断点下载(火狐)</button>';

        for (var i = 0; i < data.length; i++) {
          var x = document.getElementById('filetbl').insertRow();
          var cell = x.insertCell();
          cell.innerHTML = data[i].file_hash.substr(0, 20) + "...";

          cell = x.insertCell();
          cell.innerHTML = data[i].file_name;

          cell = x.insertCell();
          cell.innerHTML = data[i].file_size;

          cell = x.insertCell();
          cell.innerHTML = data[i].upload_at;

          cell = x.insertCell();
          cell.innerHTML = data[i].last_updated;

          cell = x.insertCell();
          cell.innerHTML = downloadHtml.format(data[i].file_hash, queryParams()) +
                  renameFileHtml.format(data[i].file_hash, data[i].FileName, data[i].file_hash,
                          queryParams()) + cdlFileHtml.format(data[i].file_hash, queryParams());
        }
      }
    });
  }

  function toUploadFile() {
    window.location.href = '/file/upload?' + queryParams();
  }

  function downloadFile(durl) {
    $.ajax({
      url: durl,
      type: "POST",
      error: function (jqXHR, textStatus, errorThrown) {
        if (textStatus == "error") {
          alert(textStatus + " : " + errorThrown);
        } else {
          alert(textStatus);
        }
      },
      success: function (body, textStatus, jqXHR) {
        try {
          alert("文件即将下载自: " + body);
          var elemIF = document.createElement("iframe");
          elemIF.src = body;
          elemIF.style.display = "none";
          document.body.appendChild(elemIF);
        } catch (e) {
          alert(e);
        }
      }
    });
  }

  function cdlFile(durl) {
    layer.open({
      type: 2,
      title: '断点续传下载演示',
      maxmin: true,
      shadeClose: true, //点击遮罩关闭层
      area: ['600px', '300px'],
      content: '/static/view/download.html' + durl
    });
  }

  function renameFile(filehash, filename, renameUrl) {
    var newFileName = prompt("\n当前文件名: {0}\n\n请输入新的文件名: ".format(filename));
    newFileName = newFileName.trim();

    if (newFileName.length <= 0) {
      alert("文件名不能为空");
      return;
    }

    if (newFileName.indexOf(" ") >= 0) {
      alert("文件名不能包含空格");
      return;
    }

    $.ajax({
      url: renameUrl + "&filename=" + newFileName,
      type: "POST",
      error: function (msg) {
        alert(msg);
      },
      success: function (body) {
        alert("文件名修改成功");
        window.location.href = '/static/view/home.html';
      }
    });
  }
</script>

</html>